<template>
  <div class="body">
    <Header
      :active="0"
      :isShow="false"
      :isShow2="false"
      :isShowLogin="false"
      @changeActive="changeActive"
      :userName="userInfo.name"
    ></Header>

    <div class="w100 pt-20 pl-80 pr-80 rows">
      <div class="w-270 mr-30">
        <div class="w-270 h-173 mb-10 bgff br-20 rowscl pl-20 pr-20">
          <div class="w100 rowsb rowsm">
            <div class="fs-20 col333 fw-b">{{ userInfo.name }}</div>
            <div class="fs-20 col333">{{ userInfo.stNumber }}</div>
          </div>
          <div class="fs-16 col333 mt-20">{{ userInfo.xyName }}</div>
          <div class="w100 rowsb rowsm mt-20 fs-16 col333">
            <div class="">{{ userInfo.njName }}</div>
            <div class="">{{ userInfo.bjName }}</div>
          </div>
        </div>

        <div class="w-270 bgff br-20 rowscl pointer">
          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(1)"
            :style="
              active == 1 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_xx.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">消息中心</div>
          </div>

          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(2)"
            :style="
              active == 2 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_jcld.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">基础劳动</div>
          </div>

          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(5)"
            :style="
              active == 5 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_gy.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">社会公益劳动</div>
          </div>

          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(4)"
            :style="
              active == 4 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_ldcg.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">劳动成果</div>
          </div>

          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(3)"
            :style="
              active == 3 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_bg.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">劳动总结报告</div>
          </div>

          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(6)"
            :style="
              active == 6 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_cj.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">我的成绩</div>
          </div>

          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(7)"
            :style="
              active == 7 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_wd.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">我的劳动</div>
          </div>

          <div
            class="rows rowsm h-60 pl-51"
            @click="changeActive(8)"
            :style="
              active == 8 ? 'background: #FFDDDD;border-radius: 16px;' : ''
            "
          >
            <img
              src="../../static/img/icon_ph.png"
              class="w-20 h-20 mr-10"
              alt=""
            />
            <div class="fs-20 col333">排行榜单</div>
          </div>

          <!-- <div class="rows rowsm h-60 pl-51" @click="changeActive(9)" :style="active == 9 ? 'background: #FFDDDD;border-radius: 16px;' : ''">
            <img src="../../static/img/icon_dsp.png" class="w-20 h-20 mr-10" alt="">
            <div class="fs-20 col333">短视频</div>
          </div>

          <div class="rows rowsm h-60 pl-51" @click="changeActive(10)" :style="active == 10 ? 'background: #FFDDDD;border-radius: 16px;' : ''">
            <img src="../../static/img/icon_xh.png" class="w-20 h-20 mr-10" alt="">
            <div class="fs-20 col333">我喜欢的视频</div>
          </div>

          <div class="rows rowsm h-60 pl-51" @click="changeActive(11)" :style="active == 11 ? 'background: #FFDDDD;border-radius: 16px;' : ''">
            <img src="../../static/img/sp.png" class="w-20 h-20 mr-10" alt="">
            <div class="fs-20 col333">课程</div>
          </div> -->
        </div>
      </div>

      <div class="w100 rowsb" v-if="active == 0">
        <div class="" style="width: 49%">
          <div class="w100 bgff br-20 p-all-24 rowsa rowsm">
            <div class="rowscl rowsm">
              <div class="fs-20 col333 mb-10 fw-b">已通过</div>
              <div
                class="w-80 h-80 br-40 rowsc rowsm colfff fs-18 pointer"
                style="background-color: #00c40d"
                @click="toPage('1')"
              >
                {{ ldAnalysis.pass }}条
              </div>
            </div>

            <div class="rowscl rowsm">
              <div class="fs-20 col333 mb-10 fw-b">未审批</div>
              <div
                class="w-80 h-80 br-40 rowsc rowsm colfff fs-18 pointer"
                style="background-color: #fdc222"
                @click="toPage('2')"
              >
                {{ ldAnalysis.adult }}条
              </div>
            </div>

            <div class="rowscl rowsm">
              <div class="fs-20 col333 mb-10 fw-b">已驳回</div>
              <div
                class="w-80 h-80 br-40 rowsc rowsm colfff fs-18 pointer"
                style="background-color: #e33636"
                @click="toPage('3')"
              >
                {{ ldAnalysis.reject }}条
              </div>
            </div>
          </div>

          <div class="w100 h-105 bgff br-20 rowsb rowsm pl-30 pr-30 mt-20">
            <div class="rowscl">
              <div class="fs-18 fw-b col333 mb-20 ldTag">基础劳动</div>
              <!-- <div class="col888 fs-14">2022-10-11</div> -->
            </div>
            <div
              class="w-120 h-40 br-20 rowsc rowsm fs-14"
              style="border: 1px solid #e33636; color: #e33636"
            >
              {{Number(userInfo.jcldJdPer).toFixed(0)}}%
            </div>
          </div>

          <div class="w100 h-105 bgff br-20 rowsb rowsm pl-30 pr-30 mt-20">
            <div class="rowscl">
              <div class="fs-18 fw-b col333 mb-20">劳动总结报告</div>
              <!-- <div class="col888 fs-14">2022-10-11</div> -->
            </div>
            <div
              class="w-120 h-40 br-20 rowsc rowsm fs-14"
              style="border: 1px solid #e33636; color: #e33636"
            >
              {{Number(userInfo.ldzjJdPer).toFixed(0)}}%
            </div>
          </div>

          <div class="w100 h-105 bgff br-20 rowsb rowsm pl-30 pr-30 mt-20">
            <div class="rowscl">
              <div class="fs-18 fw-b col333 mb-20">劳动成果</div>
              <!-- <div class="col888 fs-14">2022-10-11</div> -->
            </div>
            <div
              class="w-120 h-40 br-20 rowsc rowsm fs-14"
              style="border: 1px solid #e33636; color: #e33636"
            >
              {{Number(userInfo.ldcgJdPer).toFixed(0)}}%
            </div>
          </div>

          <div class="w100 h-105 bgff br-20 rowsb rowsm pl-30 pr-30 mt-20">
            <div class="rowscl">
              <div class="fs-18 fw-b col333 mb-20">社会公益劳动</div>
              <!-- <div class="col888 fs-14">2022-10-11</div> -->
            </div>
            <div
              class="w-120 h-40 br-20 rowsc rowsm fs-14"
              style="border: 1px solid #e33636; color: #e33636"
            >
              {{Number(userInfo.ldgyJdPer).toFixed(0)}}%
            </div>
          </div>
        </div>
        <div class="" style="width: 49%">
          <div class="w100 bgff br-20 p-all-20">
            <div class="rows rowsm mb-20">
              <img
                src="../../static/img/icon_kh.png"
                class="w-20 h-20 mr-10"
                alt=""
              />
              <div class="fw-b fs-18">劳动教育考核方案</div>
            </div>
            <div class="fs-16 col333">
              <p class="mb-10">1.劳动总成绩=理论成绩x20%+实践成绩x80%</p>
              <p class="mb-10">
                2.实践成绩=基础劳动成绩x60%+社会公益劳动成绩x10%+劳动成果成绩x10%+劳动总结报告成绩x20%
              </p>
              <p class="mb-10">
                3.基础劳动成绩=该生现有积分÷2800积分（基础劳动积分上限）x100
              </p>
            </div>
          </div>

          <div class="w100 bgff br-20 p-all-20 mt-20">
            <div class="warp">
             <div class="left rows rowsm mb-20">
               <img src="../../static/img/icon_gg.png" class="w-20 h-20 mr-10" alt=""/>
              <div class="fw-b fs-18">通知公告</div>
             </div>
              <div class="fs-16 right" @click="handelMore">更多>> </div>
            </div>
            <div
              class="w100 rowsb rowsm mb-24 pointer"
              v-for="(item, index) in newsList"
              :key="index"
            >
              <div class="one_overflow w-326 fs-16 col333" @click="toMsgDetail(item)">
                {{ item.name }}</div>
              <div class="fs-12 col888">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="w100 pointer" v-if="active == 1">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="handelHome">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="handelMsg">消息中心</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="msgIndex != 0" >
            <span @click="handelChange">{{
              msgIndex == 1
                ? "待办事项"
                : msgIndex == 2
                ? "通知公告"
                : msgIndex == 3
                ? "系统消息"
                : msgIndex == 4
                ? "客服"
                : ""
            }}</span>
          </el-breadcrumb-item>
          <!-- <el-breadcrumb-item v-if="msgDetailFlag">通知公告详情</el-breadcrumb-item> -->
        </el-breadcrumb>

        <div class="" v-if="msgIndex == 0">
          <div
            class="w100 h-80 br-10 bgff mt-20 rowsb rowsm pl-20 pr-20"
            @click="msgIndex = 1"
          >
            <div class="rows rowsm">
              <img
                src="../../static/img/icon_db.png"
                class="w-60 h-60 mr-10"
                alt=""
              />
              <div class="rowscl">
                <div class="col333 fs-18 mb-10 fw-b">待办事项</div>
                <div class="col888 fs-12">待办事项</div>
              </div>
            </div>
            <div class="rows rowsm">
              <div
                class="w-14 h-14 rowsc rowsm colfff br-6 fs-10"
                style="background-color: #e33636"
                v-if="num1"
              >
                {{ num1 }}
              </div>
              <img
                src="../../static/img/icon_jj.png"
                class="w-16 h-16 ml-10"
                alt=""
              />
            </div>
          </div>

          <div
            class="w100 h-80 br-10 bgff mt-20 rowsb rowsm pl-20 pr-20"
            @click="msgIndex = 2"
          >
            <div class="rows rowsm">
              <img
                src="../../static/img/icon_tz.png"
                class="w-60 h-60 mr-10"
                alt=""
              />
              <div class="rowscl">
                <div class="col333 fs-18 mb-10 fw-b">通知公告</div>
                <div class="col888 fs-12">通知公告</div>
              </div>
            </div>
            <div class="rows rowsm">
              <div
                class="w-14 h-14 rowsc rowsm colfff br-6 fs-10"
                style="background-color: #e33636"
                v-if="num2"
              >
                {{ num2 }}
              </div>
              <img
                src="../../static/img/icon_jj.png"
                class="w-16 h-16 ml-10"
                alt=""
              />
            </div>
          </div>

          <!-- <div class="w100 h-80 br-10 bgff mt-20 rowsb rowsm pl-20 pr-20">
            <div class="rows rowsm">
              <img
                src="../../static/img/icon_xpy.png"
                class="w-60 h-60 mr-10"
                alt=""
              />
              <div class="rowscl">
                <div class="col333 fs-18 mb-10 fw-b">系统消息</div>
                <div class="col888 fs-12">系统消息</div>
              </div>
            </div>
            <div class="rows rowsm">
              <div
                class="w-14 h-14 rowsc rowsm colfff br-6 fs-10"
                style="background-color: #e33636"
                v-if="num3"
              >
                {{ num3 }}
              </div>
              <img
                src="../../static/img/icon_jj.png"
                class="w-16 h-16 ml-10"
                alt=""
              />
            </div>
          </div> -->

          <div
            class="w100 h-80 br-10 bgff mt-20 rowsb rowsm pl-20 pr-20"
            @click="msgIndex = 4"
          >
            <div class="rows rowsm">
              <img
                src="../../static/img/icon_xtxx.png"
                class="w-60 h-60 mr-10"
                alt=""
              />
              <div class="rowscl">
                <div class="col333 fs-18 mb-10 fw-b">客服</div>
                <div class="col888 fs-12">客服热线</div>
              </div>
            </div>
            <div class="rows rowsm">
              <!-- <div class="w-14 h-14 rowsc rowsm colfff br-6 fs-10" style="background-color: #e33636;">1</div> -->
              <img
                src="../../static/img/icon_jj.png"
                class="w-16 h-16 ml-10"
                alt=""
              />
            </div>
          </div>
        </div>

        <toDoItem v-if="msgIndex == 1"></toDoItem>

        <msg v-if="(msgIndex == 2 || msgIndex == 3) && msgDetailFlag == false"></msg>
        <msgDetail v-if="msgDetailFlag" :msgDetailData="msgDetailData"></msgDetail>

        <server v-if="msgIndex == 4"></server>
      </div>

      <div class="w100 pointer" v-if="active == 2">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="baseActive = 0">基础劳动</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="baseActive != 0">{{
            baseActive == 12 ? "选择学生" : baseTitle
          }}</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="" v-if="baseActive == 0">
          <div class="w100 h-50 bgff rowsc rowsm br-10 mt-20 mb-20">
            <div class="fs-20 fw-b col333">
              基础劳动积分上限:
              <span style="color: #e33636">{{ baseWorkList.countPoints }}</span>
              我已获得积分:
              <span style="color: #e33636">{{ baseWorkList.userPoints }}</span>
            </div>
          </div>

          <div class="w100 rows rowsm rowsw">
            <div
              class="w-300 p-all-20 br-20 bgff ml-6 mr-6 mb-20 pointer"
              v-for="(item, index) in baseWorkList.list"
              :key="index"
              @click="
                (baseTitle = item.name),
                  (baseActive = item.type),
                  (student = null),
                  (studentIndex = '')
              "
            >
              <div class="fs-20 col333 fw-b mb-20 ellipsis">
                {{ item.name }}
              </div>
              <div class="fs-16 col888 mb-40">
                已获得{{ item.userPosition }}积分
              </div>
              <div class="w100 rowsb rowsm">
                <div class="fs-12 ellipsis" style="color: #e33636">

                  <el-tooltip class="item" placement="top" >
                    <div slot="content" v-text="item.content"></div>
                    <span> {{ item.content }}</span>
                  </el-tooltip>
                </div>
                <div
                  class="w-80 h-30 br-15 rowsc rowsm colfff fs-14"
                  style="background-color: #e33636"
                >
                  填报
                </div>
              </div>
            </div>
          </div>
        </div>

        <dormWork
          class="mt-20"
          @back="baseActive = 0"
          :title="baseTitle"
          :type="baseActive"
          v-if="
            baseActive == 1 ||
            baseActive == 2 ||
            baseActive == 3 ||
            baseActive == 9 ||
            baseActive == 10 ||
            baseActive == 11
          "
        ></dormWork>

        <university
          class="mt-20"
          @back="(baseActive = 0), (inputData = {})"
          :inputData="inputData"
          :user="student"
          :type="baseActive"
          v-if="baseActive == 5"
          @choseStudent="choseStudent($event, 5)"
          @clearUser="student = null"
        ></university>

        <model
          class="mt-20"
          @back="baseActive = 0"
          :type="baseActive"
          v-if="baseActive == 8"
        ></model>

        <report
          class="mt-20"
          @back="baseActive = 0"
          :type="baseActive"
          v-if="baseActive == 4"
        ></report>

        <speech
          class="mt-20"
          @back="baseActive = 0"
          :type="baseActive"
          v-if="baseActive == 7"
        ></speech>

        <Internet
          class="mt-20"
          @back="(baseActive = 0), (inputData = {})"
          :inputData="inputData"
          :user="student"
          :type="baseActive"
          v-if="baseActive == 6"
          @choseStudent="choseStudent($event, 6)"
          @clearUser="student = null"
        ></Internet>

        <choseStudent
          class="mt-20"
          :type="baseActive"
          v-if="baseActive == 12"
          @choseItem="choseItem"
        ></choseStudent>
      </div>

      <div class="w100 pointer" v-if="active == 3">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>劳动总结报告</el-breadcrumb-item>
        </el-breadcrumb>

        <sumUp></sumUp>
      </div>

      <div class="w100 pointer" v-if="active == 4">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>劳动成果</el-breadcrumb-item>
        </el-breadcrumb>

        <gain></gain>
      </div>

      <div class="w100 pointer" v-if="active == 5">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>社会公益劳动</el-breadcrumb-item>
        </el-breadcrumb>

        <publicGood></publicGood>
      </div>

      <div class="w100 pointer" v-if="active == 6">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="scoreIndex = 0">我的成绩</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span v-if="scoreIndex != 2">{{
              scoreIndex == 1
                ? "基础劳动分数"
                : scoreIndex == 3
                ? "劳动总结报告"
                : scoreIndex == 4
                ? "社会公益活动"
                : scoreIndex == 5
                ? "劳动成果"
                : ""
            }}</span>
            <span v-else @click="scoreIndex = 1">基础劳动分数</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="scoreIndex == 2">{{
            baseWorkChoseItemName
          }}</el-breadcrumb-item>
        </el-breadcrumb>

        <myScore
          v-if="scoreIndex == 0"
          @changeScoreIndex="changeScoreIndex"
        ></myScore>

        <baseWorkScore
          v-if="scoreIndex == 1"
          @changeScoreIndex="baseWorkScoreListChoseItem"
        ></baseWorkScore>

        <baseWorkScoreList
          v-if="scoreIndex == 2"
          :type="baseWorkType"
          @choseItem="myWorkChoseItem"
        ></baseWorkScoreList>

        <sumUpList
          v-if="scoreIndex == 3"
          @choseItem="myWorkChoseItem"
        ></sumUpList>

        <publicGoodList
          v-if="scoreIndex == 4"
          @choseItem="myWorkChoseItem"
        ></publicGoodList>

        <gainList
          v-if="scoreIndex == 5"
          @choseItem="myWorkChoseItem"
        ></gainList>
      </div>

      <div class="w100 pointer" v-if="active == 7">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="myWorkIndex = 0" v-if="myWorkBackIndex == 0"
              >我的劳动</span
            >
            <span @click="active = 6" v-if="myWorkBackIndex == 1"
              >基础劳动</span
            >
            <span @click="active = 6" v-if="myWorkBackIndex == 2"
              >劳动总结报告</span
            >
            <span @click="active = 6" v-if="myWorkBackIndex == 3"
              >劳动成果</span
            >
            <span @click="active = 6" v-if="myWorkBackIndex == 4"
              >社会公益劳动</span
            >
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="myWorkIndex == 1">详情</el-breadcrumb-item>
        </el-breadcrumb>

        <myWork
          v-if="myWorkIndex == 0"
          @choseItem="myWorkChoseItem"
          :activeIndex="activeIndex"
        ></myWork>

        <myWorkDetail
          v-if="myWorkIndex == 1"
          :id="myWorkId"
          :index="myWorkDetailIndex"
          :backIndex="backIndex"
          :ldType="ldType"
        ></myWorkDetail>
      </div>

      <div class="w100 pointer" v-if="active == 8">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>排行榜单</el-breadcrumb-item>
        </el-breadcrumb>

        <rank></rank>
      </div>

      <div class="w100 pointer" v-if="active == 9">
        <div class="w100 rowsb rowsm">
          <div class="">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>当前位置</el-breadcrumb-item>
              <el-breadcrumb-item>
                <span @click="active = 0">首页</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                <span @click="isChoseVideo = false">短视频</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="isChoseVideo"
                >短视频详情</el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>
          <div
            class="w-60 h-30 br-15 rowsc rowsm"
            style="background-color: #e33636"
            @click="isShowPublishVideo = true"
            v-if="!isChoseVideo"
          >
            <img src="" alt="" />
            <div class="colfff fs-16">发布</div>
          </div>
        </div>

        <div class="" v-if="!isChoseVideo">
          <videoList @choseVideoItem="choseVideoItem"></videoList>

          <el-dialog :visible.sync="isShowPublishVideo" width="1000px">
            <div class="w100 br-20 bgff">
              <div
                class="w100 h-200 br-16 p-all-20"
                style="background-color: #f7f7f7"
              >
                <div class="fs-20 col333 mb-16">视频简介</div>
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入视频简介"
                  class="input"
                  v-model="videoContent"
                >
                </el-input>
              </div>

              <div
                class="w100 h-60 br-16 rowsb rowsm pl-20 pr-20 mt-30"
                style="background-color: #f7f7f7"
              >
                <div class="col333 fs-20">发布地点</div>
                <el-input
                  v-model="videoAddress"
                  placeholder="请输入发布地点"
                  class="w-400 input"
                ></el-input>
              </div>

              <div
                class="w100 h-60 br-16 rowsb rowsm pl-20 pr-20 mt-30"
                style="background-color: #f7f7f7"
              >
                <div class="col333 fs-20">上传视频文件</div>
                <!--  action="http://47.104.196.119:8078/api/utils/ossUpload" -->
                <el-upload
                  class="upload-demo"
                  :action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
                  :show-file-list="false"
                  :multiple="false"
                  :limit="1"
                  :on-success="uploadSuccess"
                  :on-error="uploadErr"
                  accept="video/*"
                >
                  <div
                    class="w-80 h-30 br-15 rowsc rowsm bgff fw-b"
                    style="border: 1px solid #e33636; color: #e33636"
                  >
                    选择文件
                  </div>
                </el-upload>
              </div>

              <div
                class="w100 h-60 br-16 rowsb rowsm pl-20 pr-20 mt-30"
                style="background-color: #f7f7f7"
              >
                <div class="col333 fs-20">上传封面图</div>
                <el-upload
                  class="upload-demo"
                   :action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
                  :show-file-list="false"
                  :multiple="false"
                  :limit="1"
                  :on-success="uploadSuccess"
                  :on-error="uploadErr"
                  accept="image/*"
                >
                  <div
                    class="w-80 h-30 br-15 rowsc rowsm bgff fw-b"
                    style="border: 1px solid #e33636; color: #e33636"
                  >
                    选择文件
                  </div>
                </el-upload>
              </div>

              <div class="w100 rowsc rowsm mt-50">
                <div
                  class="w-600 h-60 br-30 rowsc rowsm colfff fs-20"
                  style="background-color: #e33636"
                >
                  发布
                </div>
              </div>
            </div>
          </el-dialog>
        </div>

        <div class="mt-20" v-else>
          <VideoDetail :id="videoId"></VideoDetail>
        </div>
      </div>

      <div class="w100 pointer" v-if="active == 10">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>我喜欢的视频</el-breadcrumb-item>
        </el-breadcrumb>

        <iLikeVideo @choseVideoItem="choseVideoItem"></iLikeVideo>
      </div>

      <div class="w100 pointer" v-if="active == 11">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="courseIndex = 0">课程</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item
            v-if="courseIndex == 1 || courseIndex == 2 || courseIndex == 4"
          >
            <span @click="courseIndex = 1">课程详情</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="courseIndex == 2"
            >课程详情</el-breadcrumb-item
          >
          <el-breadcrumb-item v-if="courseIndex == 3">成绩</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="w100 mt-20" v-if="courseIndex == 0">
          <div
            class="w100 p-all-20 bgff br-20 rows rowsm mb-20"
            v-for="(item, index) in 2"
            :key="index"
            @click="(courseID = index), (courseIndex = 1)"
          >
            <img
              :src="
                index == 1
                  ? 'http://ldjy.zxcvii.top/file/zb1.png'
                  : 'http://ldjy.zxcvii.top/file/zb2.png'
              "
              class="w-260 h-160 br-20 mr-20"
              alt=""
            />
            <div class="w100 rowscl">
              <div class="fw-b fs-20 col333 mb-20">
                {{ index == 0 ? "大国工匠" : "新时代大学生劳动教育" }}
              </div>
              <div class="fs-16 col888 mb-60">课程性质-必修</div>
              <div class="w100 rowsb rowsm">
                <div class="rows rowsm">
                  <div
                    class="w-300 mr-16 h-10 br-5"
                    style="background-color: #f7f7f7"
                  >
                    <div
                      class="h100 br-5"
                      style="background-color: #e33636"
                      :style="{ width: `${index == 0 ? '80' : '40'}%` }"
                    ></div>
                  </div>
                  <div class="fs-12" style="color: #e33636">
                    进度{{ index == 0 ? "80" : "40" }}%
                  </div>
                </div>
                <div class="rows rowsm">
                  <div class="rows rowsm mr-26" @click.stop="courseIndex = 3">
                    <img
                      src="../../static/img/cj.png"
                      class="w-20 h-20 mr-6"
                      alt=""
                    />
                    <div class="fs-16 col333">成绩</div>
                  </div>
                  <div
                    class="rows rowsm"
                    @click.stop="(courseID = index), (courseIndex = 4)"
                  >
                    <img
                      src="../../static/img/ks.png"
                      class="w-20 h-20 mr-6"
                      alt=""
                    />
                    <div class="fs-16 col333">考试</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-20" v-if="courseIndex == 1 || courseIndex == 4">
          <courseDetail
            @playVideo="courseIndex = 2"
            :courseID="courseID"
            :courseIndex="courseIndex"
          ></courseDetail>
        </div>

        <div class="mt-20" v-if="courseIndex == 2">
          <VideoDetail></VideoDetail>
        </div>

        <div class="mt-20" v-if="courseIndex == 3">
          <exam @backCourse="courseIndex = 0"></exam>
        </div>
      </div>

      <div class="w100 pointer" v-if="active == 12">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
        </el-breadcrumb>

        <help></help>
      </div>

      <div class="w100 pointer" v-if="active == 13">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>个人资料</el-breadcrumb-item>
        </el-breadcrumb>

        <userInfo></userInfo>
      </div>

      <div class="w100 pointer" v-if="active == 14">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>个人排行</el-breadcrumb-item>
        </el-breadcrumb>

        <userRank></userRank>
      </div>

      <div class="w100" v-if="active == 15">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>修改密码</el-breadcrumb-item>
        </el-breadcrumb>

        <resetPwd @changeActive="changeActive"></resetPwd>
      </div>

      <div class="w100 pointer" v-if="active == 16">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>用户协议</el-breadcrumb-item>
        </el-breadcrumb>

        <agreement1></agreement1>
      </div>

      <div class="w100 pointer" v-if="active == 17">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>隐私政策</el-breadcrumb-item>
        </el-breadcrumb>

        <agreement2></agreement2>
      </div>

      <div class="w100 pointer" v-if="active == 18">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span @click="active = 0">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>关于我们</el-breadcrumb-item>
        </el-breadcrumb>

        <agreement3></agreement3>
      </div>
    </div>

    <Footer class="mt-24"></Footer>
  </div>
</template>

<script>
import dormWork from "../index/baseWork/dormWork.vue";
import university from "../index/baseWork/university.vue";
import report from "../index/baseWork/report.vue";
import Internet from "../index/baseWork/Internet.vue";
import speech from "../index/baseWork/speech.vue";
import model from "../index/baseWork/model.vue";
import choseStudent from "../index/baseWork/choseStudent.vue";

import sumUp from "../index/other/sumUp.vue";
import gain from "../index/other/gain.vue";
import publicGood from "../index/other/publicGood.vue";

import myScore from "../index/score/myScore.vue";
import baseWorkScore from "../index/score/baseWorkScore.vue";
import baseWorkScoreList from "../index/score/baseWorkScoreList.vue";
import sumUpList from "../index/score/sumUpList.vue";
import publicGoodList from "../index/score/publicGoodList.vue";
import gainList from "../index/score/gainList.vue";

import myWork from "../index/myWork/myWork.vue";
import myWorkDetail from "../index/myWork/myWorkDetail.vue";

import rank from "../index/other/rank.vue";

import VideoDetail from "../index/video/videoDetail.vue";
import videoList from "../index/video/videoList.vue";
import iLikeVideo from "../index/video/iLikeVideo.vue";

import courseDetail from "../index/course/courseDetail.vue";
import exam from "../index/course/exam.vue";

import help from "../index/user/help.vue";
import userInfo from "../index/user/userInfo.vue";
import userRank from "../index/user/userRank.vue";
import resetPwd from "../index/user/resetPwd.vue";
import agreement1 from "../index/user/agreement1.vue";
import agreement2 from "../index/user/agreement2.vue";
import agreement3 from "../index/user/agreement3.vue";

import msg from "../index/msg/msg.vue";
import msgDetail from '../index/msg/msgDetail.vue'
import server from "../index/msg/server.vue";
import toDoItem from "../index/msg/toDoItem.vue";
export default {
  components: {
    dormWork,
    university,
    VideoDetail,
    courseDetail,
    exam,
    msg,
    msgDetail,
    server,
    toDoItem,
    report,
    Internet,
    speech,
    model,
    choseStudent,
    sumUp,
    gain,
    publicGood,
    myScore,
    baseWorkScore,
    baseWorkScoreList,
    sumUpList,
    publicGoodList,
    gainList,
    myWork,
    myWorkDetail,
    rank,
    videoList,
    iLikeVideo,
    help,
    userInfo,
    userRank,
    resetPwd,
    agreement1,
    agreement2,
    agreement3,
  },
  props: {},
  data() {
    return {
      backIndex:'',
      activeIndex: 2, //跳转我的劳动下标
      ldAnalysis: {}, //审核条数
      active: 0, //1-11首页选择纵向tab索引  12帮助中心 13个人资料 14个人排行 15修改密码 16用户协议 17隐私政策 18关于我们
      baseActive: 0, //基础劳动选择索引
      newsList: [], //通知列表
      // baseWorkList:['宿舍、教师、实验室等活动','大学生创新创业训练计划项目','劳动之星、文明宿舍、劳动模范','校内公共区域活动','公益活动、志愿服务、社区服务','学校大型活动志愿服务','科技帮扶、文化宣传等社会实践活动','劳模报告心得体会','劳动周','劳动主题演讲比赛 知识竞赛等','互联网+、挑战杯等比赛'],  //12 选择学生
      isShowPublishVideo: false, //是否显示发布弹窗
      isChoseVideo: false, //是否进入视频详情
      videoId: "", //视频详情id
      videoContent: "", //发布视频简介
      videoAddress: "", //发布视频地点
      videoFile: "", //发布视频文件
      videoImg: "", //发布视频封面

      courseIndex: 0, //课程状态 0 列表 1 详情 2 观看 3成绩 4考试
      courseID: 0, //课程id
      msgIndex: 0, //消息状态 0 列表 1代办事项 2通知公告 3系统消息 4客服 5查看督促
      student: null,
      studentIndex: "", //跳转到选择学生后选择完跳转回的索引
      inputData: {}, //跳转选择学生的暂存数据
      baseTitle: "",
      scoreIndex: 0, //成绩索引 0我的成绩1基础劳动成绩2基础劳动列表3劳动总结报告列表4社会公益活动5劳动成果
      baseWorkType: "", //基础劳动类型
      baseWorkChoseItemName: "", //基础劳动选择查看列表类型名称
      myWorkIndex: 0, //我的劳动索引 0我的劳动1详情
      myWorkId: "", //我的劳动详情id
      ldType: "",
      myWorkDetailIndex: "", //我的劳动详情索引 0全部 1基础劳动 3社会公益劳动 3劳动成果 1劳动总结报告
      myWorkBackIndex: "", //我的劳动详情上一级面包屑展示 0我的劳动1基础劳动2劳动总结报告3劳动成果4社会公益劳动
      userInfo: {},
      num1: 0,
      num2: 0,
      num3: 0,
      baseWorkList: {},
      msgDetailFlag:false,
      msgDetailData:{},
    };
  },
  watch: {
    // baseActive(){
    //   this.student = null
    // }
    msgIndex: {
      immediate: true,
      handler() {
        this.getMsgNum();
      },
    },
    // active(){
    //   this.myWorkIndex = 0
    // }
    // baseActive:{
    //   immediate:true,
    //   handler(){
    //     this.getBaseWorkList()
    //   }
    // }
  },
  computed: {},
  created() {
    this.getNewsList();
    this.getUserInfo();
    this.getBaseWorkList();
    this.getMyLdAnalysis();
  },
  mounted() {
   
  },
  methods: {
    replaceSpacesInText(htmlContent) {
      // 使用 DOMParser 将 HTML 字符串解析为 DOM
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlContent, 'text/html');

      // 创建一个 TreeWalker 来遍历文本节点
      const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, null, false);

      // 遍历文本节点并替换空格
      while (walker.nextNode()) {
        const textNode = walker.currentNode;
        textNode.nodeValue = textNode.nodeValue.replace(/ /g, '&nbsp;');
      }

      // 返回修改后的 HTML 字符串
      return doc.body.innerHTML;
    },
    convertClassToStyle(html) {
      // 创建一个 DOMParser 实例
      const parser = new DOMParser();
      // 解析 HTML 字符串
      const doc = parser.parseFromString(html, 'text/html');

      // 获取所有带有 class 属性的元素
      const elements = doc.querySelectorAll('[class]');

      elements.forEach(element => {
        // 获取 class 属性的值
        const classList = element.className.split(' ');

        // 根据 class 名称设置相应的 style 属性
        // 这里可以根据实际需要定义样式映射
        const styleMap = {
          'ql-align-justify': 'text-align: justify;',
          'ql-align-center': 'text-align: center;',
          // 添加其他 class 到 style 的映射
        };

        // 将 class 转换为 style
        classList.forEach(className => {
          if (styleMap[className]) {
            element.style.cssText += styleMap[className];
          }
        });

        // 移除 class 属性
        element.removeAttribute('class');
      });
      // 返回转换后的 HTML
      return doc.body.innerHTML;
    },
    handelHome(){
      this.active = 0
      this.msgDetailFlag = false
    },
    handelMsg(){
      this.msgIndex = 0
      this.msgDetailFlag = false
    },
    handelChange(){
      console.log('this.msgIndex ',this.msgIndex )
      // if(this.msgIndex ==2){
      //   this.msgDetailFlag = true
      // }
      
    },
    toMsgDetail(item){
      this.msgDetailFlag = true
      this.msgDetailData = item
      this.msgDetailData.content = this.replaceSpacesInText(this.convertClassToStyle(this.msgDetailData.content)
          .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')).replace(/amp;/g, '')
      this.active = 1
      this.msgIndex = 2
      // this.msgIndex = 2
      
    },
    toPage(val) {
      if (val == "1") {
        this.myWorkIndex = 0;
        this.active = 7;
        this.activeIndex = 2;
      } else if (val == "2") {
        this.activeIndex = 1;
        this.myWorkIndex = 0;
        this.active = 7;
      } else if (val == "3") {
        this.activeIndex = 3;
        this.myWorkIndex = 0;
        this.active = 7;
      }
    },
    choseStudent(e, i) {
      this.baseActive = 12;
      this.studentIndex = i;
      this.inputData = e;
    },
    // 获取审核条数 proldconfig/myLdAnalysis
    getMyLdAnalysis() {
      this.$axios.post("proldconfig/myLdAnalysis", {}).then((res) => {
        if (res.data.code != 200)
          return this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        console.log("ldAnalysis==>", res.data);
        this.ldAnalysis = res.data.data;
      });
    },
    // 通知公告
    getNewsList() {
      this.$axios.post("pronotice/list?pageNum=1&pageSize=6", {}).then((res) => {
        if (res.data.code != 200)
          return this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        this.newsList = res.data.rows;
      });
    },
    getBaseWorkList() {
      this.$axios.post("proldconfig/listByUser?pageNum=1&pageSize=11", {}).then((res) => {
        if (res.data.code != 200)
          return this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        let { data } = res.data;
        this.baseWorkList = data;
      });
    },
    getMsgNum() {
      this.$axios.post("prouser/listMessage", {}).then((res) => {
        if (res.data.code != 200)
          return this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        let { data } = res.data;
        this.num1 = data.filter((item) => item.name == "待办事项").count;
        this.num2 = data.filter((item) => item.name == "通知公告").count;
        this.num3 = data.filter((item) => item.name == "系统消息").count;
      });
    },
    getUserInfo() {
      this.$axios.post("prouser/getById", {}).then((res) => {
        if( res.data.code == 200){
        let { data } = res.data;
        this.userInfo = data;
        }else{
          this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        }
      }).catch(() =>{
          this.$router.push('/')
      })
    },
    changeActive(e) {
      this.active = e;
      this.myWorkIndex = 0;
      this.isChoseVideo = false;
      this.baseActive = 0;
    },
    choseVideoItem(e) {
      this.videoId = e.id;
      this.active = 9;
      this.isChoseVideo = true;
    },
    // 公告通知更多
    handelMore(){
      this.active = 1
      this.msgIndex = 2
    },
    myWorkChoseItem(e, i, backIndex) {
      console.log("///////////e", e);
       console.log("///////////i", i);
        console.log("///////////backIndex", backIndex);
      this.active = 7;
      this.backIndex = backIndex
      this.myWorkBackIndex = backIndex;
      this.myWorkIndex = 1;
      this.myWorkId = e.id;
      this.ldType = e.ldType;
      this.myWorkDetailIndex = i;
    },
    baseWorkScoreListChoseItem(e) {
      console.log('eeeeeeee',e)
      this.baseWorkType = e.type;
      this.scoreIndex = e.index;
    },
    changeScoreIndex(i) {
      this.scoreIndex = i;
      console.log('iiiiiscoreIndex',i)
    },
    uploadSuccess(response, file, fileList) {
      console.log("success");
      console.log(response, file, fileList);
    },
    uploadErr(err, file, fileList) {
      console.log("err");
      console.log(err, file, fileList);
    },
    choseItem(e) {
      console.log('ssssssssss',e)
      this.student = e;
      this.baseActive = this.studentIndex;
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  background: #f7f7f7;
}
.input /deep/ .el-input__inner {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
  text-align: right;
}
// .ldTag {
//   padding: 0 15px;
//   background: #fff;
// }
.pointer {
  cursor: pointer;
}
.ellipsis {
  overflow: hidden; /* 确保超出容器的文本被隐藏 */
  white-space: nowrap; /* 防止文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.warp{
  display: flex;
  justify-content: space-between;
  .right{
    cursor: pointer;
  }
}
::v-deep .col666 {
  img {
    width: 100% !important;
  }
}
</style>
